<template>
	<view class="hint-time">
		<view class="left-title">
			<view class="text">{{title}}</view>
		</view>
		<view class="time">
			<view class="time-item" v-for="(item,i) in seckillArr" :key="i">
				<view class="top">{{item.time}}</view>
				<view :class="['text_', i === active ? 'active': '']">{{item.name}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "t-seckill",
		props: {
			title: {}
		},
		data() {
			return {
				seckillArr: [{
						time: '00.00',
						name: '已开抢'
					},
					{
						time: '10.00',
						name: '秒杀中',
					},
					{
						time: '18.00',
						name: '即将开抢'
					},
					{
						time: '20.00',
						name: '即将开抢'
					}
				],
				active: 1
			};
		}
	}
</script>

<style lang="scss">
	

		.hint-time {
			padding-left: 18rpx;
			background: url('@/static/img/seckill_bj.png') no-repeat;
			background-size: 100%;
			display: flex;

			.left-title {
				width: 42rpx;
				height: 110rpx;
				box-sizing: border-box;
				background-color: #971700;
				display: flex;
				justify-content: center;
				align-items: center;
				// padding: 15rpx 12rpx;

				.text {
					font-size: 18rpx;
					color: #ffffff;
					writing-mode: vertical-lr;
				}

			}

			.time {
				margin-left: 40rpx;
				// padding: 18rpx 0 20rpx 13rpx;
				display: flex;
				align-items: center;

				.time-item {
					text-align: center;
					margin-right: 79rpx;

					.top {
						font-size: 32rpx;
						font-weight: bold;
						font-stretch: normal;
						letter-spacing: 0rpx;
						color: #fbd9d3;
					}

					.text_ {
						margin-top: 18rpx;
						font-size: 24rpx;
						font-stretch: normal;
						letter-spacing: 0rpx;
						color: #fbd9d3
					}

					.active {
						width: 102rpx;
						height: 31rpx;
						background-image: linear-gradient(0deg, #edcb8a 0%, #f5ba4d 100%);
						border-radius: 16rpx;
						font-size: 24rpx;
						color: #971700;
					}

					&:nth-child(4) {
						margin-right: 0;
					}
				}
			}
		}
	
</style>
